<template>
  <el-select
    v-model="selectLabels"
    class="el-select-tree-multiple"
    popper-class="tree-multiple-popper"
    clearable
    multiple
    value-key="value"
    :filterable="filterable"
    :collapse-tags="collapseTags"
    :placeholder="placeholder"
    :filter-method="filter"
    @change="handleTagChange"
    @visible-change="visibleChange">
    <el-option value="0" class="hidden" />
    <el-option
      v-for="item in selectLabels"
      :key="item.value"
      class="hidden"
      :label="item.label"
      :value="item" />
    <!--el-tree绑定的数组中children里的key值不能是0-->
    <el-tree
      ref="tree"
      show-checkbox
      default-expand-all
      check-on-click-node
      icon-class="el-icon-arrow-right"
      :expand-on-click-node="false"
      :data="options"
      :props="defaultProps"
      :check-strictly="checkStrictly"
      :node-key="defaultProps.value"
      :default-checked-keys="data"
      :filter-node-method="filterNode"
      @check="handleCheckChange" />
  </el-select>
</template>
<script>
export default {
  name: 'SelectTreeMultiple',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    collapseTags: {
      type: Boolean,
      default: true
    },
    filterable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请输入关键字搜索'
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    defaultProps: {
      type: Object,
      default() {
        return {
          value: 'id',
          label: 'label',
          children: 'children',
          disabled: 'disabled'
        }
      }
    },
    checkStrictly: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectLabels: []
    }
  },
  watch: {
    data: {
      handler(val) {
        this.$refs.tree.setCheckedKeys(val)
        this.$nextTick(_ => {
          this.getLabelsByValue(this.$refs.tree.getCheckedNodes())
        })
      },
      deep: true
    },
    options(val) {
      this.getLabelsByValue(this.$refs.tree.getCheckedNodes())
    }
  },
  mounted() {
    this.getLabelsByValue(this.$refs.tree.getCheckedNodes())
  },
  methods: {
    getLabelsByValue(arr) {
      this.selectLabels = arr.map(item => ({ label: item[this.defaultProps.label], value: item[this.defaultProps.value] }))
    },
    handleCheckChange(currentNode, data) {
      this.$emit('update:data', data.checkedKeys)
      this.$emit('change', data.checkedNodes)
    },
    handleTagChange(data) {
      // select的值变化时 更新树节点的选中
      const checkedNodes = this.$refs.tree.getCheckedNodes().filter(item => data.find(child => child.value === item[this.defaultProps.value]))
      const keys = checkedNodes.map(item => item[this.defaultProps.value])
      this.$emit('update:data', keys)
      this.$emit('change', checkedNodes)
    },
    filter(query) {
      this.$refs.tree.filter(query)
      // 忽略选择器本身的过滤
      return true
    },
    filterNode(query, data) {
      if (!query) return true
      return data[this.defaultProps.label].includes(query)
    },
    visibleChange(val) {
      if (val) {
        this.$refs.tree.filter()
      }
    }
  }
}
</script>
<style lang="scss">
.tree-multiple-popper{
  padding: 0 10px;
}
</style>
